<template>
  <div>
    <div>
      <!-------------------------------表格 ----------------------down ------------------->
      <div v-show="!editVisible" class="container">
        <!-------------------------------按钮 ----------------------down------------------->
        <div class="handle-box">
          <el-button class="hand-btn" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
          <el-input v-model="query.name" class="handle-input" placeholder="方案名称" />
          <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <!-------------------------------按钮 ----------------------up ------------------->
        <el-card>
          <el-table
            ref="multipleTable"
            :data="page.content"
            border
            class="table"
            header-cell-class-name="table-header"
          >
            <el-table-column prop="id" label="方案ID" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="name" label="方案名称" />
            <el-table-column prop="describe" label="方案描述" />
            <el-table-column prop="createBy" label="创建人" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="handleView(scope.$index, scope.row)"
                >查看</el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  class="red"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :current-page="query.pageIndex"
              :page-size="query.pageSize"
              :total="page.totalElements"
              @current-change="handlePageChange"
            />
          </div>
        </el-card>
      </div>
      <!-------------------------------表格 ----------------------up ------------------->
      <!----------------------------------form 表单------------------down----------- -->
      <div v-show="editVisible">
        <!-------------------------------按钮 ----------------------down------------------->
        <div v-show="editVisible" class="handle-box">
          <el-button class="hand-btn" type="primary" icon="el-icon-back" @click="editVisible = !editVisible">返回</el-button>
        </div>
        <!-------------------------------按钮 ----------------------up ------------------->
        <el-card style="margin: 1%">
          <el-form style="margin-top: 10px">
            <el-button @click="open1 = true">产品名称：{{ form.baseProduct.name }}</el-button>
            <el-row :gutter="24" type="flex" align="middle">
              <el-col :span="4">
                <el-form-item label="方案名称">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="方案描述">
                  <el-input v-model="form.describe" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card style="margin-top: 10px;margin-left: 2%;margin-right:2%">
          <el-table
            :data="form.titles"
            tooltip-effect="dark"
            border
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            />
            <el-table-column
              prop="name"
              width="300px"
              label="标题名称"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column
              prop="describe"
              width="750px"
              label="标题描述"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.describe" />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="form.titles.splice(scope.$index+1,0,{})">插入</el-button>
                <el-button v-if="form.titles.length != 1" type="danger" size="mini" @click="form.titles.splice(scope.$index,1)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <el-card style="margin-top: 10px;margin-left: 2%;margin-right:2%;margin-bottom: 100px">
          <el-button type="primary" size="mini" @click="open = true">选择</el-button>
          <el-table
            :data="form.entitys"
            tooltip-effect="dark"
            border
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              label="项次"
              width="50"
            />
            <el-table-column
              prop="quota.name"
              width="150px"
              label="测试项目"
            />
            <el-table-column
              prop="quota.basePlan.name"
              width="150px"
              label="指标名称"
            />
            <el-table-column
              prop="type"
              label="指标类型"
            >
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.type" size="small">
                  <el-radio-button label="字符" />
                  <el-radio-button label="数值" />
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column
              prop="strVal"
              label="标准字符值"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.strVal" :disabled="scope.row.type != '字符'" />
              </template>
            </el-table-column>
            <el-table-column
              prop="miniVal"
              label="最小数值"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.miniVal" :disabled="scope.row.type != '数值'" />
              </template>
            </el-table-column>
            <el-table-column
              prop="stanVal"
              label="标准数值"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.stanVal" :disabled="scope.row.type != '数值'" />
              </template>
            </el-table-column>
            <el-table-column
              prop="maxVal"
              label="最大数值"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.maxVal" :disabled="scope.row.type != '数值'" />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="form.entitys.splice(scope.$index,1)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <!-------------------------------form表单----------------------up ------------------->
    </div>

    <el-dialog :visible.sync="open" width="60%" :close-on-click-modal="false">
      <el-row :gutter="20" style="margin: 10px">
        <el-col :span="3">
          <el-button class="hand-btn" type="primary" @click="selSet">选择</el-button>
        </el-col>
        <el-col :span="6">
          <el-input v-model="planQuery.name" placeholder="指标名称" />
        </el-col>
        <el-col :span="6">
          <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="planSearch">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="planPage.content"
        tooltip-effect="dark"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
        />
        <el-table-column
          type="index"
          label="项次"
          width="50"
        />
        <el-table-column
          prop="basePlan.name"
          label="项目名称"
        />
        <el-table-column
          prop="name"
          label="指标名称"
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="planQuery.pageIndex"
          :page-size="planQuery.pageSize"
          :total="planPage.totalElements"
          @current-change="handlePageChange"
        />
      </div>
    </el-dialog>

    <el-dialog :visible.sync="open1" width="60%" :close-on-click-modal="false">
      <el-row :gutter="20" style="margin: 10px">
        <el-col :span="6">
          <el-input v-model="planQuery.name" placeholder="产品名称" />
        </el-col>
        <el-col :span="6">
          <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="productSearch">查询</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="productPage.content"
        tooltip-effect="dark"
        border
        style="width: 100%;"
        @row-click="selTable"
      >
        <el-table-column
          type="index"
          label="项次"
          width="50"
        />
        <el-table-column
          prop="code"
          label="产品编码"
        />
        <el-table-column
          prop="name"
          label="产品名称"
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="productPage.pageIndex"
          :page-size="productPage.pageSize"
          :total="productPage.totalElements"
          @current-change="handleProductPageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>import { save } from '@/api/quality'
import { query } from '@/api/quality'
import { query as queryplan } from '@/api/baseQuota'
import { query as queryProduct } from '@/api/baseProduct'
import { delbyid } from '@/api/quality'
export default {
  name: 'Quality',
  data() {
    return {
      open: false,
      open1: false,
      selPlans: [],
      editVisible: false,
      query: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      planQuery: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      productQuery: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      page: {},
      planPage: {},
      productPage: {},
      form: { baseProduct: {}}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      query(this.query).then(res => {
        this.page = res.data.page
      })
    },
    getPlan() {
      queryplan(this.planQuery).then(res => {
        this.planPage = res.data.page
      })
    },
    getProduct() {
      queryProduct(this.productQuery).then(res => {
        this.productPage = res.data.page
      })
    },
    selSet() {
      if (this.form.entitys.length === 0) {
        for (const row of this.selPlans) {
          const data = { quotaId: row.id, quota: row }
          this.form.entitys.push(data)
        }
      } else {
        for (const row of this.selPlans) {
          let being = true
          for (const ent of this.form.entitys) {
            if (row.id === ent.quotaId) {
              being = false
              break
            }
          }
          if (being) {
            const data = { quotaId: row.id, quota: row }
            this.form.entitys.push(data)
          }
        }
      }
      this.open = false
    },
    selTable(row) {
      this.form.baseProduct = row
      this.open1 = false
    },
    handleSelectionChange(rows) {
      this.selPlans = rows
    },
    // 触发搜索按钮
    planSearch() {
      this.$set(this.planQuery, 'pageIndex', 1)
      this.getPlan()
    }, // 触发搜索按钮
    productSearch() {
      this.$set(this.productQuery, 'pageIndex', 1)
      this.getProduct()
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        delbyid(row.id).then(res => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
        .catch(() => {
        })
    },
    // 多选操作
    delAllSelection() {
      const length = this.multipleSelection.length
      let str = ''
      this.delList = this.delList.concat(this.multipleSelection)
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + ' '
      }
      this.$message.error(`删除了${str}`)
      this.multipleSelection = []
    },
    // 编辑操作
    handleEdit(index, row) {
      this.form = row
      this.editVisible = true
    },
    handleView(index, row) {
      this.$router.push({ path: '/QualityView', query: { id: row.id }})
    },
    // 保存编辑
    saveEdit() {
      const data = { name: this.form.name, describe: this.form.describe, productId: this.form.baseProduct.id }
      const titles = []
      for (const item of this.form.titles) {
        if (item.name) {
          const ent = { name: item.name, describe: item.describe }
          titles.push(ent)
        }
      }
      const entitys = []
      for (const item of this.form.entitys) {
        if (item.type) {
          const ent = { type: item.type, strVal: item.strVal, miniVal: item.miniVal, stanVal: item.stanVal, maxVal: item.maxVal, quotaId: item.quotaId }
          entitys.push(ent)
        }
      }
      data.titles = titles
      data.entitys = entitys
      save(data).then(res => {
        this.$message.success(res.message)
        this.editVisible = false
        this.getData()
      })
    },
    add() {
      this.form = { titles: [{}], entitys: [], baseProduct: {}}
      this.editVisible = true
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    },
    // 产品分页导航
    handleProductPageChange(val) {
      this.$set(this.productQuery, 'pageIndex', val)
      this.getProduct()
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
